/* eslint-disable react/jsx-key */
import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import React, { useState } from 'react';
import type { DetailItem, parking_operations } from '../data';
// import { ParkingType } from '../utils/utils';
import { queryParkTurnoverDetail } from '@/pages/ParkingOrder/service';
import { Drawer, Timeline } from 'antd';
import moment from 'moment';
import dayjs from 'dayjs';

const ParkingOrderDetailView: React.FC<{ id?: number; visible: boolean; onClose: () => void }> = ({
  id = 0,
  visible,
  onClose,
}) => {
  const [timelinedata, setTimelinedata] = useState<parking_operations[]>();
  const countTimes = (start_time?: string, end_time?: string) => {
    let timeDiff_minutes = moment(end_time).diff(moment(start_time), 'minutes');
    if (timeDiff_minutes < 0) {
      return '-';
    }
    if (moment(end_time).diff(moment(start_time), 'seconds') % 60 != 0) {
      timeDiff_minutes += 1;
    }
    if (timeDiff_minutes % 60 > 0) {
      const timeDiff = `${Math.floor(timeDiff_minutes / 60)}小时${timeDiff_minutes % 60}分钟`;
      return timeDiff;
    } else if (timeDiff_minutes % 60 == 0) {
      const timeDiff = `${timeDiff_minutes / 60}小时0分钟`;
      return timeDiff;
    } else {
      return '---';
    }
  };
  const countTimeDiff = (startTime?: string, endTime?: string) => {
    if (startTime != undefined && endTime != undefined) {
      return countTimes(startTime, endTime);
    } else if (startTime == undefined) {
      return '车辆未入场';
    } else if (endTime == undefined) {
      return countTimes(startTime, dayjs().format('YYYY-MM-DD HH:mm:ss'));
    } else {
      return ' - ';
    }
  };

  const columns: ProDescriptionsItemProps<DetailItem | undefined>[] = [
    {
      label: '停车场名称',
      dataIndex: 'zone_name',
      render: (_, record) => record?.zone_name || '-',
    },
    {
      label: '车位号',
      dataIndex: 'space_name',
      render: (_, record) => (record?.space_name ? record?.space_name : '-'),
    },
    {
      label: '车牌号',
      dataIndex: 'plate_number',
      render: (_, record) => record?.plate_number || '-',
    },
    {
      label: '手机号',
      dataIndex: 'phone',
      render: (_, record) => record?.phone || '-',
    },
    {
      label: '车辆入场时间',
      dataIndex: 'begin_time',
      render: (_, record) => record?.begin_time || '车辆未入场',
    },
    {
      label: '车辆离场时间',
      dataIndex: 'end_time',
      render: (_, record) => record?.end_time || '车辆未离场',
    },
    {
      label: '停车时长',
      dataIndex: 'type',
      render: (_, record) => {
        return countTimeDiff(record?.begin_time, record?.end_time);
      },
    },
    {
      label: '应收金额(元)',
      dataIndex: 'total_amount',
      render: (_, record) => `${record?.total_amount || 0}元`,
    },
    {
      label: '实收金额(元)',
      dataIndex: 'total_actual_amount',
      render: (_, record) => `${record?.total_actual_amount || 0}元`,
    },
    {
      label: '优惠减免(元)',
      dataIndex: 'reduction_amount',
      render: (_, record) => `${record?.reduction_amount || 0}元`,
    },
  ];

  return (
    <Drawer
      title={`${id}订单详情`}
      placement="right"
      width={'30vw'}
      onClose={() => {
        onClose();
      }}
      visible={visible}
    >
      {timelinedata && (
        <Timeline>
          {timelinedata?.map((item: parking_operations) => (
            <Timeline.Item>
              {item.name} {item.operation_time}
            </Timeline.Item>
          ))}
        </Timeline>
      )}
      <ProDescriptions
        title={''}
        column={1}
        columns={columns}
        params={{ id }}
        request={async () => {
          const res = queryParkTurnoverDetail({ id });
          setTimelinedata((await res).data?.parking_operations);
          return res;
        }}
      />
    </Drawer>
  );
};

export default ParkingOrderDetailView;
